<template>
      <div class="team-member-container">
        <div class="titl-bar" style="font-size: 30px;text-align: center"><span>团队成员</span></div>
        <el-input placeholder="搜索" v-model="searchQuery" class="search-input"></el-input>
        <el-button @click="handleSearch" icon="el-icon-search"></el-button>
        <div class="text-and-line">
          <span class="text">在站成员</span>
          <div class="line"></div>
        </div>
        <el-row :gutter="60" class="member-row">
          <el-col :span="24 / membersPerRow" v-for="member in sortedOnDutyMembers" :key="member.memberId" >
            <router-link :to="{ path: '/RDteam/growthRecord', query: { id: member.memberId }}">
            <el-card class="member-card" shadow="hover">
              <div class="image-container">
              <img :src="member.pictureUrl" class="image"/>
              </div>
              <div class="text-container">
                <span>姓名：{{ member.name }}</span>
                <span>专业：{{ member.major }}</span>
                <span>加入时间：{{ member.joinTime }}</span>
                <span>擅长：{{ member.expertise }}</span>
                <span>成绩数：{{ member.totalScore }}</span>
              </div>
            </el-card>
              </router-link>
          </el-col>
        </el-row>

        <div class="text-and-line">
          <span class="text">出站成员</span>
          <div class="line"></div>
        </div>
        <el-row :gutter="60" class="member-row">
          <el-col :span="24 / membersPerRow" v-for="member in sortedOffDutyMembers" :key="member.memberId">
            <router-link :to="{ path: '/RDteam/growthRecord', query: { id: member.memberId }}">
            <el-card class="member-card" shadow="hover">
              <div class="image-container">
                <img :src="member.pictureUrl || defaultImage" class="image" alt="Image">
              </div>
              <div class="text-container">
                <span>姓名：{{ member.name }}</span>
                <span>专业：{{ member.major }}</span>
                <span>加入时间：{{ member.joinTime }}</span>
                <span>擅长：{{ member.expertise }}</span>
                <span>成绩数：{{ member.totalScore }}</span>
                <span>就职单位：{{member.employmentCompany}}</span>
                <span>联系电话：{{member.phone}}</span>
              </div>
            </el-card>
            </router-link>
          </el-col>
        </el-row>
      </div>
</template>

<script>
// import router from '@/router'

import router from '@/router'
import { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/team/info";

export default {
  // components: {
  //   SearchResults
  // },
  data() {
    return {
      defaultImage:'../../assets/images/avatar.jpg',
      searchQuery: '',
      scrollDistance: 380*4,
      members: [], // 从member_info表获取的数据
      loading: false,
      membersPerRow: 4, // 每行展示的学生数
      defaultImageUrl:""//图片加载失败
    };
  },
  computed: {
    sortedOnDutyMembers() {
      return this.members.filter(m => m.isOnDuty === 1).sort((a, b) => b.totalScore - a.totalScore);
    },
    sortedOffDutyMembers() {
      return this.members.filter(m => m.isOnDuty === 0).sort((a, b) => b.totalScore - a.totalScore);
    },
    beforeMount() {
      // 如果没有找到标志或者标志已过期
      if (!sessionStorage.getItem('hasRefreshed')) {
        // 设置刷新标记，避免再次刷新
        sessionStorage.setItem('hasRefreshed', 'true');
        // 进行刷新
        window.location.reload();
      } else {
        // 如果已经刷新过，将标记移除，这样下一次页面刷新会重新触发刷新逻辑
        sessionStorage.removeItem('hasRefreshed');
      }
    },
  },
  mounted() {
    this.fetchMembers(); // 组件挂载后立即获取数据
  },
  methods: {
    async fetchMembers() {
      this.loading = true; // 开始加载
      try {
        const response = await listInfo(); // 调用 listInfo 方法并等待响应
        this.members = response.rows ;
      } catch (error) {
        console.error('Error fetching members:', error); // 处理错误
      } finally {
        this.loading = false; // 结束加载
      }
      console.log('Members:',this.members);
    },
    //搜索
    handleSearch() {
      if (this.searchQuery) {
        router.push({ path: '/RDTeam/search', query: { q: this.searchQuery } });
      } else {
        alert('请输入搜索内容');
      }
    },
    goToDetailPage(id) {
      console.log('Navigating to detail page with ID:', id);
      this.$router.push({
        path: '/RDTeam/growthRecord',
        params: { id }
      });
    }
}
};
</script>

<style>


.line-with-text {
  position: relative;
}

.text-and-line {

  position: relative;
  display: flex;
  align-items: center;
}

.text {
  position: absolute;
  top: -30px;
  left: 0;
  font-size: 24px;
}

.line {
  flex: 1;
  height: 5px;
  background-color: #000000; /* 分割线的颜色 */
  margin-left: 0px; /* 文字右侧的间距 */
}

.titl-bar{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 20px;
  width: 100%; /* 确保 .title-bar 占满整个容器的宽度 */
  height: 50px; /* 可以调整高度 */
  font-size: 24px; /* 设置文字大小为24像素 */
  font-weight: 600; /* 设置文字加粗 */
}

.team-member-container {
  padding: 0 20px;
  height: 100%;
  width: 100%;
}

.search-input {
  width: 10%;
  margin-bottom: 20px;
  padding-bottom: 50px;
}

.member-row {
  margin-bottom: 20px;
  margin-left: 50px;

}

.member-card {
  width: 300px;
  min-height: 200px;
  min-width: 200px;
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  align-items: center; /* 水平居中对齐所有子元素 */
  margin: 10px 40px;
}

@media (max-width: 600px) {
  .el-col {
    /* 每行显示1个卡片 */
    width: 100%;
  }
}

/* 大于768px且小于等于992px宽的屏幕（例如小桌面） */
@media (min-width: 600px) and (max-width: 992px) {
  .el-col {
    /* 每行显示2个卡片 */
    width: 50%;
  }
}

/* 大于992px且小于等于1200px宽的屏幕（例如中等桌面） */
@media (min-width: 993px) and (max-width: 1200px) {
  .el-col {
    /* 每行显示3个卡片 */
    width: 33.3333%;
  }
}

/* 大于1200px宽的屏幕（例如大桌面） */
@media (min-width: 1201px) {
  .el-col {
    /* 每行显示4个卡片 */
    width: 25%;
  }
}
.member-card div span {
  display: block;
  margin-bottom: 2px; /* 可选：为每个 span 添加底部外边距 */

  word-wrap: break-word; /* 确保电话号码在容器内换行 */
}

.image-container {
  display: flex;
  justify-content: center; /* 水平居中图片 */
  align-items: center; /* 垂直居中图片 */
  width: 100%; /* 图片容器宽度 */
  margin-bottom: 10px; /* 图片与文本之间的间距 */
}

.image {
  width: 100%; /* 图片宽度根据容器自适应 */
  height: auto; /* 保持图片的纵横比 */
  max-width: 300px; /* 最大宽度限制，可以根据需要调整 */
  max-height: 300px; /* 最大高度限制，可以根据需要调整 */
}
.text-container {
  width: 200px;
  padding: 0 10px;
  text-align: left; /* 文字左对齐 */
  font-size: 16px;
}
.el-card {
  transition: transform 0.3s ease;
}

.el-card:hover {
  transform: translateY(-5px); /* 鼠标悬停时向上移动 */
}


</style>
